<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

</style> 
<title>MEGA 2.0</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!-- <link rel="stylesheet" type="text/css" href="../css/style.css" /> -->
<link rel="stylesheet" type="text/css" href="../css/business-register.css" />
<link rel="stylesheet" type="text/css" href="../css/retina-images.css" />
<link rel="stylesheet" type="text/css" href="../css/pro.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="../js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
<script type="text/javascript">

$(document).ready(function() {  
  function initTreePanelScroll()
  {
	  $('.fm-tree-panel').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initTransferPanelScroll()
  {
	  $('.transfer-scrolling-table').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initSharedGridScroll()
  {
	  $('.grid-scrolling-table').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  function initSharedBlocksScroll()
  {
	  $('.shared-blocks-scrolling').jScrollPane({enableKeyboardNavigation:false,showArrows:true, arrowSize:5,animateScroll: true});
  }
  
  
  $.gridHeader = function()  
  {	
		$('.grid-table tbody tr:first-child td').each(function(i,e) {
		  var headerColumn = $('.grid-table-header th').get(i);
		  $(headerColumn).width($(e).width());
	    });
   }	
	
  initTreePanelScroll();
  initTransferPanelScroll();
  initSharedGridScroll();
  initSharedBlocksScroll();
  $.gridHeader();
  
  $(window).bind('resize', function () 
  {
	  initTreePanelScroll();
      initTransferPanelScroll();
      initSharedGridScroll();
	  initSharedBlocksScroll();
      $.gridHeader();
  });
  $('.nw-fm-tree-folder').bind('click', function() {
	  var fmTreeItem = $(this).parent('.nw-fm-tree-item');
	  if(fmTreeItem.attr('class').indexOf('selected') == -1) {
		  $('.nw-fm-tree-item.selected').removeClass('selected');
		  fmTreeItem.addClass('selected');
	  }
  });
  $('.contains-folders > .nw-fm-arrow-icon').bind('click', function() {
	  var fmTreeItem = $(this).parent('.nw-fm-tree-item');
	  if(fmTreeItem.attr('class').indexOf('expanded') == -1) {
		  fmTreeItem.addClass('expanded');
		  fmTreeItem.next('ul').addClass('opened');
		  initTreePanelScroll();
	  } else {
		  fmTreeItem.removeClass('expanded');
		  fmTreeItem.next('ul').removeClass('opened');
		  initTreePanelScroll();
	  }
  });
  $('.nw-fm-left-icon').bind('click', function() {
	  var currentPanelTitle = $(this).attr('class').split(' ')[1];
	  if($(this).attr('class').indexOf('active') == -1) {
		  $('.nw-fm-left-icon.active').removeClass('active');
		  $(this).addClass('active');
		  $('.content-panel.active').removeClass('active');
		  $('.content-panel.'+currentPanelTitle).addClass('active');
		  initTreePanelScroll();
		  $('.fm-left-menu').removeClass().addClass('fm-left-menu ' + currentPanelTitle);
	  }
  });
  $('.nw-contact-item').bind('click', function() {
	  if($(this).attr('class').indexOf('selected') == -1) {
		  $('.nw-contact-item.selected').removeClass('selected');
		  $(this).addClass('selected');
	  }
  });
  $('.nw-conversations-item').bind('click', function() {
	  if($(this).attr('class').indexOf('selected') == -1) {
		  $('.nw-conversations-item.selected').removeClass('selected');
		  $(this).addClass('selected');
	  }
  });
  var initial;
  $('.nw-fm-left-icon').bind('mouseover', function () {
	  var  tooltip = $(this).find('.nw-fm-left-tooltip');
	  clearTimeout( initial );
	  initial = window.setTimeout( 
      function() {
        $(tooltip).addClass('hovered');
      }, 1000);
  });
  $('.nw-fm-left-icon').bind('mouseout', function () {
	    $(this).find('.nw-fm-left-tooltip').removeClass('hovered');
		clearTimeout( initial );
  });
  
  $('.fm-files-view-icon').bind('click', function () {
	  if ($(this).attr('class').indexOf('active') == -1) {
		  if ($(this).attr('class').indexOf('block-view') > -1) {
			  $('.files-grid-view ').addClass('hidden');
			  $('.fm-blocks-view').removeClass('hidden'); 
              initSharedBlocksScroll();
		  } else {
			  $('.files-grid-view ').removeClass('hidden');
			  $('.fm-blocks-view').addClass('hidden');
			  initSharedGridScroll();
		  }
		  $('.fm-files-view-icon').removeClass('active');
		  $(this).addClass('active');
	  }
  }); 

});

</script>
</head>

<body id="bodyel" class="logged rk-saved fontsize2 en free business-register">
<div class="top-head"></div>
<div class="main-pad-block">
	<div class="bus-reg-body">
		<div class="bus-reg-header">Create Business Account</div>
		<div class="bus-reg-info-block">
			<div class="bus-reg-subheader">Plan details</div>
			<div class="bus-reg-input num">
				<div class="bus-reg-title">Number of users</div>
				<div class="bus-reg-icon number-of-user"></div>
				<input type=" " name=" " placeholder="3">
				<div class="error-message">is the error signal too red?</div>
			</div>

			<div class="bus-reg-subheader">Account information</div>
			<div class="bus-reg-input error">
				<div class="bus-reg-icon company-name"></div>
				<input type=" " name=" " placeholder="Company Name">
				<div class="error-message">is the error signal too red?</div>
			</div>
			<div class="bus-reg-input active">
				<div class="bus-reg-icon phone"></div>
				<input type=" " name=" " placeholder="Phone Number (optional)">
				<div class="error-message">is the error signal too red?</div>
			</div>
			<div class="bus-reg-input">
				<div class="bus-reg-icon number-of-user"></div>
				<input type=" " name=" " placeholder="First Name" class="fir-name">
				<input type=" " name=" " placeholder="Last Name" class="las-name">
   				<div class="error-message">is the error signal too red?</div>
			</div>
			<div class="bus-reg-input">
				<div class="bus-reg-icon email"></div>
				<input type=" " name=" " placeholder="Email">
				<div class="error-message">is the error signal too red?</div>
			</div>
			<div class="bus-reg-input pw-first strong-password">
				<div class="bus-reg-icon pw"></div>
				<input type=" " name=" " placeholder="Password">
				<div class="password-status-icon">
                    <div class="password-status-warning">
                    	<span class="password-warning-txt">Warning:</span> your password is too weak to proceed
                    	<div class="password-tooltip-arrow"></div>
                    </div>
                </div>

			</div>
			<div class="new-registration good2">
			    <div class="register-pass-status-line1"></div>
			    <div class="register-pass-status-line2"></div>
			    <div class="register-pass-status-line3"></div>
			    <div class="register-pass-status-line4"></div>
			    <div class="register-pass-status-line5"></div>
			    <div class="clear"></div>
			    <div class="password-stutus-txt hidden">
			        <div class="new-reg-status-pad"><strong>Strength:</strong> Strong</div>
			        <div class="new-reg-status-description">This password will withstand most sophisticated brute-force attacks. Please ensure that you will remember it.</div>
			    </div>
			</div>
			<div class="bus-reg-input">
				<div class="bus-reg-icon pw"></div>
				<input type=" " name=" " placeholder="Retype password">
				<div class="error-message">is the error signal too red?</div>
			</div>

			<div class="bus-reg-subheader">Payment method</div>
			<div class="bus-reg-radio-block">
				<div class= "bus-reg-radio checkOff"></div>
				<div class="provider">Credit Card</div> 
			    <div class="provider-icon ecpVI"></div>
                <div class="provider-icon ecpMC"></div>
  				<div class= "bus-reg-radio checkOff last-child"></div>
  				<div class="provider">Direct Debit</div>
			</div>
			<div class="bus-reg-agreement">
            	<div class="bus-reg-checkbox"></div>
                <div class="bus-reg-txt">Augue scribentur quo et, eu mea numquam fabulas, nonumy timeam nostrum ei cum. Homero mandamus ut nam, prompta bonorum assueverit vim id.</div>
			</div>

			<div class="bus-reg-agreement">
            	<div class="bus-reg-checkbox checkOn"></div>
                <div class="bus-reg-txt">I agree with the MEGA Business
                	<a href="/terms" class="terms">Terms of Service &#8827;</a>
                </div>
			</div>
			<div class="bus-reg-btn disabled">
				<span>Register </span>
				<div class="next-arrow"></div> 
			</div>
			<div class="clear"></div>
		</div>

		<div class="bus-reg-plan">
            <div class="bus-plan-icon64"></div>
            <div class="business-plan-title">
                BUSINESS
            </div>
            <div class="business-plan-price">
                <span class="big">10 €</span> /per user/month*
            </div>
            <div class="business-plan-info grey">
                <span class="left">Base Plan (3 Licences)</span>
                <span class="right">30 €</span>
            </div>
            <div class="business-plan-info">
                <span class="left">7x additional licences</span>
                <span class="right">70 €</span>
            </div>
            <div class="business-plan-info grey">
                <span class="left">Sub Total</span>
                <span class="right">100 €</span>
            </div>
            <div class="business-plan-info ">
                <span class="left">Tax</span>
                <span class="right">0 €</span>
            </div>
            <div class="business-plan-total">
                <span class="left">Total</span>
                <span class="right">100 €</span>
            </div>
		</div>

		<div class="bus-reg-btn-2">
			<span>Register </span>
			<div class="next-arrow"></div>
		</div>
		<div class="clear"></div>
	</div>

	<div class="bus-confirm-body confirm hidden">
		<div class="bus-reg-header">Comfirm your account</div>
		<div class="bus-reg-input error">
			<div class="bus-reg-icon email"></div>
			<input type=" " name=" " placeholder="Email">
			<div class="error-message">Doesn't match registered email.</div>
		</div>
		<div class="bus-reg-btn" id="ddd">
			<span>Confirm Account </span>
			<div class="next-arrow"></div> 
		</div>	
		<div class="clear"></div>	
	</div>

	<div class="bus-confirm-body verfication hidden">
		<div class="bus-confirmImg"></div>
		<div class="bus-reg-header">Verification emails have been sent</div>
		<div class="bus-reg-featureTxt">New accounts will be activated after the link in the verification emails has been confirmed and the user sets their own password.</div>
	</div>
</div>




	<div class="bus-reg-bottom-page">
		<div class="page-header">Your password is your master encryption key</div>
		<div class="bus-reg-featureBlock">
			<div class="bus-reg-featureImg100 ky-icon"></div>
			<div class="bus-reg-featureTxt">Never enter your password on a device you do not fully trust.</div>
		</div>
		<div class="bus-reg-featureBlock">
			<div class="bus-reg-featureImg100 forbit-icon"></div>
			<div class="bus-reg-featureTxt">There is no recovery procedure for lost passwords, make sure you can remember your password at all times</div>
		</div>
		<div class="bus-reg-featureBlock">
			<div class="bus-reg-featureImg100 extension-icon"></div>
			<div class="bus-reg-featureTxt">For enhanced security, install our browser extension and load MEGA from your computer rather than from our servers.</div>
		</div>
	</div>
</body>
</html>
































